extends layout/main-layout

block active-item
  - menu['Elements']['active'] = 1
  - menu['Elements']['S']['Buttons']['active'] = 1

block content

  h3 Buttons
  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button colors
        .panel-body
          button.btn.btn-default(type='button') Default
          button.btn.btn-primary(type='button') Primary
          button.btn.btn-success(type='button') Success
          button.btn.btn-info(type='button') Info
          button.btn.btn-warning(type='button') Warning
          button.btn.btn-danger(type='button') Danger
          button.btn.btn-inverse(type='button') Inverse
          button.btn.btn-green(type='button') Green
          button.btn.btn-purple(type='button') Purple
          button.btn.btn-pink(type='button') Pink
          br
          br
          a(href="#").btn.btn-link Button Link
          button(type='button').btn.btn-default
            strong button tag
          | 
          a(href="#").btn.btn-default
            strong anchor tag
      // END panel
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Labeled
        .panel-body
          // Success button with label 
          button.btn.btn-labeled.btn-success(type='button')
            span.btn-label
              i.fa.fa-check
            | Success
          // Danger button with label 
          button.btn.btn-labeled.btn-danger(type='button')
            span.btn-label
              i.fa.fa-times
            | Danger
          // Info button with label 
          button.btn.btn-labeled.btn-info(type='button')
            span.btn-label
              i.fa.fa-exclamation
            | Info
          // Warning button with label 
          button.btn.btn-labeled.btn-warning(type='button')
            span.btn-label
              i.fa.fa-warning
            | Warning
          br
          br
          // Standard button with label 
          button.btn.btn-labeled.btn-default(type='button')
            span.btn-label
              i.fa.fa-arrow-left
            | Left
          // Standard button with label on the right side 
          button.btn.btn-labeled.btn-default(type='button')
            | Right
            span.btn-label.btn-label-right
              i.fa.fa-arrow-right
      // END panel
  // END row
  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button sizing
        .panel-body
          .row
            .col-lg-6
              p
                button.btn.btn-primary.btn-lg(type='button') Large button
                button.btn.btn-default.btn-lg(type='button') Large button
              p
                button.btn.btn-primary(type='button') Default button
                button.btn.btn-default(type='button') Default button
            .col-lg-6
              p
                button.btn.btn-primary.btn-sm(type='button') Small button
                button.btn.btn-default.btn-sm(type='button') Small button
              p
                button.btn.btn-primary.btn-xs(type='button') Extra small button
                button.btn.btn-default.btn-xs(type='button') Extra small button
      // END panel
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button group
        .panel-body
          p
          .btn-group
            button.btn.btn-default(type='button') Left
            button.btn.btn-default(type='button') Middle
            button.btn.btn-default(type='button') Right
          p
          p
          .btn-group
            button.btn.btn-default(type='button') 1
            button.btn.btn-default(type='button') 2
            button.btn.btn-default(type='button') 3
            button.btn.btn-default(type='button') 4
          .btn-group
            button.btn.btn-default(type='button') 5
            button.btn.btn-default(type='button') 6
            button.btn.btn-default(type='button') 7
          .btn-group
            button.btn.btn-default(type='button') 8
      // END panel
  // END row

  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Pills
        .panel-body
          p Pill left
          p
            button.btn.btn-pill-left.btn-default(type='button') Default
            button.btn.btn-pill-left.btn-primary(type='button') Primary
            button.btn.btn-pill-left.btn-success(type='button') Success
            button.btn.btn-pill-left.btn-info(type='button') Info
            button.btn.btn-pill-left.btn-warning(type='button') Warning
            button.btn.btn-pill-left.btn-danger(type='button') Danger
            button.btn.btn-pill-left.btn-inverse(type='button') Inverse

          p Pill right
          p
            button.btn.btn-pill-right.btn-default(type='button') Default
            button.btn.btn-pill-right.btn-primary(type='button') Primary
            button.btn.btn-pill-right.btn-success(type='button') Success
            button.btn.btn-pill-right.btn-info(type='button') Info
            button.btn.btn-pill-right.btn-warning(type='button') Warning
            button.btn.btn-pill-right.btn-danger(type='button') Danger
            button.btn.btn-pill-right.btn-inverse(type='button') Inverse

      // END panel
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Oval
        .panel-body
          button.btn.btn-oval.btn-default(type='button') Default
          button.btn.btn-oval.btn-primary(type='button') Primary
          button.btn.btn-oval.btn-success(type='button') Success
          button.btn.btn-oval.btn-info(type='button') Info
          button.btn.btn-oval.btn-warning(type='button') Warning
          button.btn.btn-oval.btn-danger(type='button') Danger
          button.btn.btn-oval.btn-inverse(type='button') Inverse
      // END panel
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button Square
        .panel-body
          button.btn.btn-square.btn-default(type='button') Default
          button.btn.btn-square.btn-primary(type='button') Primary
          button.btn.btn-square.btn-success(type='button') Success
          button.btn.btn-square.btn-info(type='button') Info
          button.btn.btn-square.btn-warning(type='button') Warning
          button.btn.btn-square.btn-danger(type='button') Danger
          button.btn.btn-square.btn-inverse(type='button') Inverse
      // END panel
  // END row

  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Button dropdown
        .panel-body
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
              | Default
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown')
              | Primary
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-success.dropdown-toggle(type='button', data-toggle='dropdown')
              | Success
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-info.dropdown-toggle(type='button', data-toggle='dropdown')
              | Info
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-warning.dropdown-toggle(type='button', data-toggle='dropdown')
              | Warning
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-danger.dropdown-toggle(type='button', data-toggle='dropdown')
              | Danger
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-inverse.dropdown-toggle(type='button', data-toggle='dropdown')
              | Inverse
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
      // END panel

    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title.ellipsis Split button dropdown
        .panel-body
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-default(type='button') Default
            button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-primary(type='button') Primary
            button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown')
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-success(type='button') Success
            button.btn.btn-success.dropdown-toggle(type='button', data-toggle='dropdown')
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-info(type='button') Info
            button.btn.btn-info.dropdown-toggle(type='button', data-toggle='dropdown')
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-warning(type='button') Warning
            button.btn.btn-warning.dropdown-toggle(type='button', data-toggle='dropdown')
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-danger(type='button') Danger
            button.btn.btn-danger.dropdown-toggle(type='button', data-toggle='dropdown')
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
          // START button group
          .btn-group(style='margin-bottom: 5px;')
            button.btn.btn-inverse(type='button') Inverse
            button.btn.btn-inverse.dropdown-toggle(type='button', data-toggle='dropdown')
              span.caret
            ul.dropdown-menu(role='menu')
              li
                a(href='#') Action
              li
                a(href='#') Another action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
          // END button group
      // END panel
  // END row
  // START row
  .row
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Pagination
        .panel-body
          // START row
          .row
            .col-lg-6
              h4 Default pagination
              ul.pagination
                li
                  a(href='#') «
                li
                  a(href='#') 1
                li
                  a(href='#') 2
                li
                  a(href='#') 3
                li
                  a(href='#') 4
                li
                  a(href='#') 5
                li
                  a(href='#') »
              h4 Disabled and active states
              ul.pagination
                li.disabled
                  a(href='#') «
                li.active
                  a(href='#')
                    | 1
                    span.sr-only (current)
                li
                  a(href='#') 2
                li
                  a(href='#') 3
                li
                  a(href='#') 4
                li
                  a(href='#') 5
                li
                  a(href='#') »
            .col-lg-6
              h4 Size
              div
                ul.pagination.pagination-lg(style="margin-bottom: 0")
                  li
                    a(href='#') «
                  li
                    a(href='#') 1
                  li
                    a(href='#') 2
                  li
                    a(href='#') 3
                  li
                    a(href='#') 4
                  li
                    a(href='#') »
              div
                ul.pagination(style="margin-bottom: 0")
                  li
                    a(href='#') «
                  li
                    a(href='#') 1
                  li
                    a(href='#') 2
                  li
                    a(href='#') 3
                  li
                    a(href='#') 4
                  li
                    a(href='#') »
              div
                ul.pagination.pagination-sm(style="margin-bottom: 0")
                  li
                    a(href='#') «
                  li
                    a(href='#') 1
                  li
                    a(href='#') 2
                  li
                    a(href='#') 3
                  li
                    a(href='#') 4
                  li
                    a(href='#') »
          // END row
      // END panel
    .col-md-6
      // START panel
      .panel.panel-default
        .panel-heading
          h3.panel-title Pager
        .panel-body
          h4 Alignment
          ul.pager
            li
              a(href='#') Previous
            li
              a(href='#') Next
          ul.pager
            li.previous
              a(href='#') ← Older
            li.next
              a(href='#') Newer →
          h4 Disabled state
          ul.pager
            li.previous.disabled
              a(href='#') ← Older
            li.next
              a(href='#') Newer →
      // START panel
  // END row
